<template>
  <div class="d-flex">
    <div class="left">
      <dv-border-box-12 :color="datavColors">
        <admission></admission>
      </dv-border-box-12>
      <dv-border-box-12 :color="datavColors">
        <building></building>
      </dv-border-box-12>
    </div>
    <div class="center">
      <div class="numberDetail content-box">
        <div class="detail" v-for="(item, index) in personInfo" :key="index">
          <div class="numberText">
            <span class="choose"> {{ item.totalCount }} </span>
          </div>
          <img
            class="icons"
            :src="theme == 0 ? icons_0[index] : icons_1[index]"
            alt=""
          />
          <div class="numberText">
            <span class="text"> {{ item.personnelTypeName }} </span>
          </div>
        </div>
      </div>
      <dv-decoration-12
        style="width: 200px; height: 200px; margin: 30px auto"
        :color="datavColors"
      />
    </div>
    <div class="right">
      <dv-border-box-12 :color="datavColors">
        <div class="numberOfPeople">
          <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
              <span>
                <i class="iconfont icon-fenxi5" />
              </span>
              <div class="d-flex">
                <span class="fs-xxl text mx-2 mt-1">校园快讯</span>
                <dv-decoration-1
                  style="width: 100px; height: 25px"
                  :color="datavColors"
                />
              </div>
            </div>
            <dv-scroll-board
              class="news pointer"
              :config="config"
              @click="skipto"
            />
          </div>
        </div>
      </dv-border-box-12>
      <dv-border-box-12 :color="datavColors">
        <div class="numberOfPeople">
          <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
              <span>
                <i class="iconfont icon-border-bottom" />
              </span>
              <div class="d-flex">
                <span class="fs-xxl text mx-2 mt-1">通知公告</span>
                <dv-decoration-3
                  style="width: 100px; height: 25px"
                  :color="datavColors"
                />
              </div>
            </div>
            <div>
              <el-carousel
                class="news"
                direction="vertical"
                height="165px"
                :initial-index="0"
                v-if="data.viewList.length > 0"
              >
                <el-carousel-item
                  v-for="(item, index) in data.viewList"
                  :key="index"
                >
                  <div class="newsInfo d-flex">
                    <img class="newsImg" :src="item.img" alt="" />
                    <p class="newsText">
                      &nbsp;&nbsp;&nbsp;&nbsp;{{ item.label }}
                    </p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </dv-border-box-12>
    </div>
  </div>
  <div class="bottom-box">
    <dv-border-box-12 :color="datavColors">
      <div class="introduce">
        <div class="bg-color-black">
          <div class="d-flex pt-2 pl-2">
            <span>
              <i class="iconfont icon-vector" />
            </span>
            <div class="d-flex">
              <span class="fs-xxl text mx-2 mt-1">校园介绍</span>
              <dv-decoration-6
                style="width: 100px; height: 25px"
                :color="datavColors"
              />
            </div>
          </div>
          <div class="d-flex mt-1 jc-center body-box">
            <el-carousel :interval="4000" type="card" height="250px">
              <el-carousel-item
                v-for="(item, index) in schoolList"
                :key="index"
              >
                <img class="img" :src="item" alt="" />
              </el-carousel-item>
            </el-carousel>
            <el-scrollbar
              class="scrollbar"
              height="120px"
              ref="scrollbarRef"
              @mouseenter="mouseenter"
              @mouseleave="mouseleave"
              @scroll="scroll"
            >
              <div class="introduceText" ref="innerRef">
                &nbsp;&nbsp;&nbsp;&nbsp;黄冈中学创办于1904年。1953年被湖北省政府首批确定为省重点中学，1993年被湖北省政府首批认定为省级示范学校。100多年来，学校为国家
                培养了一大批人才。从这里走出了前国家代主席董必武，著名文艺理论家胡风，中科院院士、国家自然科学一等奖获得者舒德干，嫦娥工程运载火箭
                系统总设计师贺祖明，音乐家王原平，在亚运会上一举夺得4枚金牌的体育健将邱波，生物学家、“时代楷模”钟扬等一大批优秀人才。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;改革开放以来，学校全面贯彻党的教育方针，大力实施素质教育，教育教学成绩显著。先后有800多名学生保送至北大、清华等著名大学深造;参加
                各类中学生学科竞赛，有3000多人次获国家级奖励，200多人进入全国冬令营，100多人入选国家集训队，林强、库超、王崧等15名学生在国际数、理、化奥林匹克竞赛中共获得19枚奖牌
                <br />&nbsp;&nbsp;&nbsp;&nbsp;学校先后获得了“全国教育系统先进集体”“全国德育先进校”“全国贯彻学校体育工作条例优秀学校”“全国学校民主管理先进单位”
                “全国五一劳动奖状”“全国
                文明单位”“全国文明校园”等20多个国家级荣誉，被誊为“普通中学的一面旗帜”。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;现有在岗教职工286人;在岗特级教师3人，正高级教师7人，高级教师124人。在校学生2900余人，教学班56个(含3个海军航空实验班)。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;学校占地面积500亩，建筑面积15万平方米，校园规划合理，功能完善，设施齐全，环境幽雅。学校图书馆拥有文史哲阅览室1个、语文期刊阅览室2个、英语
                期刊阅览室1个、综合阅览室3个，研修室3个，藏书30万册，期刊15万册，电子阅览室配有计算机432台。学校建有音乐、美术、信息技术、通用技术、数学建模等50个学科教室，理化生实验室12个。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;学校秉承“弘德尚学，笃行致远”的校训，坚持以培养有崇高理想、有社会责任感、有奉献精神、有国际视野的时代精英和创新人才的育人目标，致力于为学生的可持续发
                展奠基，全面促进学生健康成长，全面塑造学生人格，全面开发学生智能，全面提升学生综合素质。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;学校近几年在课程设置多元化、国家课程校本化、校本课程标准化等环节上下了功夫，构建和完善了学校的多元课程体系，为学生提供多样化选择性的课程。一是全面落
                实国家课程方案，建设40多个学科教室，如物联网与人工智能、智能家居与智慧农业、智能机器人、汽车技术、火箭与卫星、通讯与信息化、数学建模、烹饪、模拟联合国、话剧、戏曲、乐团、陶艺、
                动漫、书法、中国画、造型基础、艺术设计与广告制作等，创新推出50多门体育、音乐、美术、科技•实验•人文选修课程并实行走班教学。二是注重发现和培养学生的兴趣，每人一张个性化课表，给
                予学生最大的课程选择自由。三是积极打造具有校本特色的精品课程和特色教材，为学生的可持续发展和终身发展奠定坚实的基础。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;学校通过实践和理论探索，在学校治理现代化制度建设方面实现了突破。按照“问题项目化、项目具体化、具体流程化、流程责任化”的理念和思路，将过去成功的做法用
                文字固化下来、将需要解决的问题找出来并研究出解决的办法再固化下来、将上级的要求落实到学校工作实际中去，坚持科学决策、民主决策、依法决策，让各项工作的落实者成为学校文件的起草者。
                通过几年的努力，形成了40多个做事和管人的规范性文件，完成了学校治理现代化制度建设的主要任务。这些制度明确了学校各项工作要做那些事，由谁来做，做成什么样子，有依有据，有责有权，
                有主有次，各负其责，主动作为，充分调动了老师们的积极性主动性，激发了学校活力。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;2018年高考，理科最高分卢展704分；全省第7名，文科最高分王振677分；全省第5名。660分以上57人。600分以上543人，600分过线率64%。一本过线率97%。清华北大
                录取人数14人。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;2019年高考，理科最高分高三(6)班夏君豪686分,文科最高分高三(2)班汪悦652分(全省19名)。600分以上438人，600分过线率50%。一本率96.6%(其中理科一本率97.8%)
                。清华北大录取人数12人。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;2020届高考，理科最高分高三(10)班高子业697分(全省17名)，文科最高分高三(2)班徐梦佳645分(全省23名)。600分以上555人,
                600分过线率57%。一本率96%(其中理科 一本率97%)。
                清华北大录取人数18人(其中高二九班1人)。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;2021届高考，物理方向最高分高三(9)班陈灿阳694分(全省27名)，历史方向最高分高三(14)班李佳凤671分(全省11名)，分别获得市物理方向、历史方向状元。600分以上
                595人，其中理科489人，文科106人，600分过线率63.5%。清华北大录取人数22人。
                <br />&nbsp;&nbsp;&nbsp;&nbsp;2021届学科竞赛，13人入选国家冬令营，1人考入清华丘成桐班，3人入选国家集训队，14人被清北录取。数学组5人，余学一、余博、蔡银鹏、曾颖、邹方睿被清北录取;化
                学组5人熊炳伊、陈涵宇、胡嗣淇、李豪、方林俊被清北录取;物理组3人，郑天宇、杨天睿、夏子彦被清北录取;生物组1人陈灿阳被清北录取。
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 :color="datavColors">
      <div class="introduce">
        <div>
          <div class="d-flex pt-2 pl-2">
            <span>
              <i class="iconfont icon-align-left" />
            </span>
            <div class="d-flex">
              <span class="fs-xxl text mx-2 mt-1">校园荣誉</span>
              <dv-decoration-6
                style="width: 100px; height: 25px"
                :color="datavColors"
              />
            </div>
          </div>
          <div>
            <el-carousel
              class="honor"
              height="410px"
              :initial-index="0"
              :interval="4000"
              v-if="data.honorList.length > 0"
            >
              <el-carousel-item
                v-for="(item, index) in data.honorList"
                :key="index"
              >
                <el-row>
                  <el-col
                    class="buildingsCol pointer"
                    :span="8"
                    v-for="(item1, index1) in item"
                    :key="index1"
                    @click="honorClick(item1)"
                  >
                    <div class="buildingsDiv building">
                      <!-- {{item.buildingName?item.buildingName:'其他'}} -->
                      <img :src="item1.pictureAddress" class="image" alt="" />
                      <div class="buildingName">
                        {{ item1.title }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  computed,
  onUnmounted,
  reactive,
  ref,
} from "vue";
import { useStore } from "vuex";
import { ElScrollbar } from "element-plus";
import building from "./building/index.vue";
import admission from "./admission/index.vue";
import { personnel, schoolNews } from "@/public/request/http";
import moment from "moment";

export default defineComponent({
  components: {
    building,
    admission,
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors);
    const theme = computed(() => useStore().state.theme);
    const config = reactive({
      data: [
        ["2023年湖北省海军航空实验班网上报名系统", "2023-1-12"],
        ["2023年湖北省海军航空实验班网上报名系统", "2023-1-12"],
        ["2023年湖北省海军航空实验班网上报名系统", "2023-1-12"],
        ["2023年湖北省海军航空实验班网上报名系统", "2023-1-12"],
        ["2023年湖北省海军航空实验班网上报名系统", "2023-1-12"],
        ["2023年湖北省海军航空实验班网上报名系统", "2023-1-12"],
      ],
      urls: [],
      index: true,
      columnWidth: [45, 475, 110],
      oddRowBGC: "rgb(2 22 30 / 46%);",
      evenRowBGC: "rgb(0 59 81 / 28%)",
    });

    const data = reactive({
      honorList: [
        [
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          },
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          },
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          },
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          },
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          },
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          }
        ],
        [
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          },
          {
            pictureAddress: require("@/assets/xiaoyuanrongyu.jpg"),
            title: "喜报！4金1银 1人保送清北 我校化学竞赛再创辉煌！",
            website: "http://www.hbshgzx.com/rshg/jxcg/2022-12-09/5810.html",
          }
        ],
      ],
      viewList: [
        {
          img: require("@/assets/jiaqi.jpg"),
          label:
            "科学规划假期、确保假期安全。在您的理解和大力支持下,我校2022年各项教育教学工作圆满完成、取得丰硕成果。寒假到来之际，请您引导孩子科学规划假期、确保假期安全，共同度过一个安全、文明、充实、愉快的假期。",
        },
        {
          img: require("@/assets/jiaqi.jpg"),
          label:
            "科学规划假期、确保假期安全。在您的理解和大力支持下,我校2022年各项教育教学工作圆满完成、取得丰硕成果。寒假到来之际，请您引导孩子科学规划假期、确保假期安全，共同度过一个安全、文明、充实、愉快的假期。",
        },
      ],
    });

    const schoolList = ref([
      require("@/assets/school.png"),
      require("@/assets/school_1.png"),
      require("@/assets/school_2.png"),
      require("@/assets/school_3.png"),
    ]);

    const personInfo = ref([
      {
        personnelTypeName: "学生",
        totalCount: "2947",
        icon: 0,
      },
      {
        personnelTypeName: "教师",
        totalCount: "251",
        icon: 1,
      },
      {
        personnelTypeName: "教职工",
        totalCount: "289",
        icon: 2,
      },
    ]);

    const icons_0 = ref([
      require("@/assets/student_0.png"),
      require("@/assets/teacher_0.png"),
      require("@/assets/person_0.png"),
    ]);
    const icons_1 = ref([
      require("@/assets/student_1.png"),
      require("@/assets/teacher_1.png"),
      require("@/assets/person_1.png"),
    ]);
    const max = ref(0);
    const scrollTop = ref(0);
    const timer = ref(null);
    const innerRef = ref<HTMLDivElement>();
    const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

    onMounted(() => {
      max.value = innerRef.value.clientHeight - 120;
      handleTime();
      getSchoolNews();
      getPersonInfo();
    });

    onUnmounted(() => {
      clearInterval(timer.value);
    });

    // todo 处理时间监听
    const handleTime = () => {
      timer.value = setInterval(() => {
        if (scrollTop.value <= max.value) {
          scrollTop.value += 0.25;
        } else {
          scrollTop.value = 0;
        }
        scrollbarRef.value.setScrollTop(scrollTop.value);
      }, 20);
    };

    const scroll = (val: any) => {
      scrollTop.value = val.scrollTop;
    };

    const mouseenter = () => {
      clearInterval(timer.value);
    };

    const mouseleave = () => {
      handleTime();
    };

    const skipto = (val: any) => {
      event.stopPropagation();
      window.open(config.urls[val.rowIndex], "_blank");
    };

    const honorClick = (val: any) => {
      window.open(val.website, "_blank");
    };

    const getPersonInfo = async () => {
      const res = await personnel();
      personInfo.value = res;
      res.forEach((element, index) => {
        personInfo.value[index].personnelTypeName = element.personnelTypeName;
        personInfo.value[index].totalCount = element.totalCount;
      });
    };

    const getSchoolNews = async () => {
      const res = await schoolNews();
      // res.noticeAnnouncements.forEach(item => {
      //   data.viewList.push({img:item.pictureAddress,label:item.content})
      // });
      // res.campusNews.forEach(item => {
      //   config.data.push([item.title, moment(item.releaseDate).format('YYYY-MM-DD')])
      //   config.urls.push(item.website)
      // });
      // for(let i=0;i<res.campusHonors.length;i+=6){
      //   data.honorList.push(res.campusHonors.slice(i,i+6));
      // }
    };

    return {
      scrollTop,
      innerRef,
      scrollbarRef,
      config,
      data,
      schoolList,
      personInfo,
      datavColors,
      icons_0,
      icons_1,
      theme,
      handleTime,
      scroll,
      mouseenter,
      mouseleave,
      skipto,
      honorClick,
      getPersonInfo,
      getSchoolNews,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$left-width: 660px;
$right-width: 660px;
.dv-border-box-12 {
  height: auto;
}
.left {
  width: $left-width;
}
.center {
  width: 600px;
  margin: 0 10px;
  text-align: center;
}
.right {
  width: $right-width;
}
.introduce {
  padding: 16px;
  height: 480px;
  width: 100%;
  border-radius: 5px;
  .bg-color-black {
    height: 480px - 32px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    padding-top: 0;
  }
  .img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
  }
  .introduceText {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 2px;
  }
}
.numberOfPeople {
  padding: 16px;
  height: 240px;
  width: $left-width;
  border-radius: 5px;
  .bg-color-black {
    height: 240px - 32px;
    border-radius: 10px;
  }
}
.numberDetail {
  padding: 20px;
  .detail {
    text-align: center;
    .numberText {
      margin: 15px 0;
      .choose {
        text-shadow: $textShadow, 0 0 7px #00a67c;
        font-size: 26px;
      }
      .text {
        letter-spacing: 5px;
      }
    }
  }
  .icons {
    width: 48px;
    height: 48px;
  }
}
.news {
  width: 100%;
  height: 165px;
  margin-top: 10px;
  .newsInfo {
    padding: 10px;
    .newsImg {
      width: 200px;
      height: 150px;
      margin-right: 20px;
    }
    .newsText {
      margin-right: 10px;
      display: inline-block;
      font-size: 16px;
      line-height: 30px;
    }
  }
}

.honor {
  width: 100%;
  height: 410px;
  margin-top: 10px;
}

.warp {
  height: 410px;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      height: 40px;
      line-height: 40px;
      display: grid;
      grid-template-columns: 5fr 2fr 2fr 2fr;
      cursor: pointer;
      font-size: 20px;
    }
  }
}
.buildingsCol {
  padding: 8px;
}
.buildingsDiv {
  .cameraIcon {
    margin-right: 10px;
    width: 20px;
    height: 20px;
  }
  .image {
    width: 100%;
    max-height: 140px;
    display: block;
  }
  .buildingName {
    padding: 10px;
    background-color: #407e8d63;
  }
}
.building:hover {
  box-shadow: 0px 0px 10px #00adff;
}
</style>
